<template>
    <div>
        <base-form :fields="fields" v-model="appInfo.metadata.webhooks" labelPosition="top" :readonly="!editing"></base-form>

        <div class="buttons text-center">
            <template v-if="editing">
                <el-button icon="Close" @click="cancel">取消</el-button>
                <el-button type="primary" icon="Check" @click="doSave">保存</el-button>
            </template>
            <template v-else>
                <el-button type="primary" icon="Edit" @click="startEdit">编辑</el-button>
            </template>
        </div>
        <hr/>
        <div class="remark">
            <div>备注：</div>
            <ul>
                <li>Webhook推送接口仅支持POST接口</li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import _ from "lodash";
import { computed } from "vue";

const props = defineProps({
    appInfo: Object,
});
const fields = [
    { label: "用户保存(新增、更新)Webhook", prop: "userSave" },
    { label: "用户删除Webhook", prop: "userDelete" },
    { label: "机构保存(新增、更新)Webhook", prop: "deptSave" },
    { label: "机构删除Webhook", prop: "deptDelete" },
];
const editing = ref(false);

let bak;
function startEdit() {
    bak = _.cloneDeep(props.appInfo.metadata.webhooks);
    editing.value = true;
}

function cancel() {
    props.appInfo.metadata.webhooks = bak;
    editing.value = false;
}

function doSave() {
    app.https
        .put("/sys/app/update", {
            id: props.appInfo.id,
            metadata: props.appInfo.metadata,
        })
        .then(() => {
            app.success();
            editing.value = false;
        });
}
</script>

<style lang="scss" scoped>

</style>
